<template>
  <div class="container">
    <Breadcrumb :items="['menu.produce', 'menu.visualization.winetype']" />
    <a-card
      direction="vertical"
      :size="12"
      fill
      :title="`酒类管理（总计${winedata.length}条）`"
    >
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addWinetypeDialog">
              <template #icon>
                <icon-plus />
              </template>
              {{ $t('searchTable.operation.create') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table :columns="columns" :data="winedata" :pagination="pagination">
        <template #wine_millilter="{ record }">
          <span>{{ record.wine_millilter }}/ml</span>
        </template>
        <template #wine_alcohol="{ record }">
          <span>{{ record.wine_alcohol }}%</span>
        </template>
        <template #wine_case="{ record }">
          <span>{{ record.wine_case }}瓶/箱</span>
        </template>
        <template #operate="{ record }">
          <!-- <a-button type="text" @click="addTemp(record)">新增</a-button> -->
          <a-button type="text" @click="editwinetype(record)">编辑</a-button>
        </template>
      </a-table>
    </a-card>
    <!-- 编辑/新增酒类对话框 -->
    <WinetypeDialog ref="winetypeDialog" :getList="getList" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
import WinetypeDialog from './components/winetypeDialog.vue';
import { getWineTypeList } from '@/api/winetype';
const winetypeDialog = ref('');
const winedata = ref([]);
const columns = ref([
  {
    title: '酒类名称',
    dataIndex: 'wine_name',
  },
  {
    title: '容量/ml',
    dataIndex: 'wine_millilter',
    slotName: 'wine_millilter',
  },
  {
    title: '酒精度',
    dataIndex: 'wine_alcohol',
    slotName: 'wine_alcohol',
  },
  {
    title: '瓶/箱',
    dataIndex: 'wine_case',
    slotName: 'wine_case',
  },
  { title: '操作', dataIndex: 'operate', slotName: 'operate', width: 160 },
]);
const addWinetypeDialog = () => {
  winetypeDialog.value.openModal();
};
const pagination = { pageSize: 10 };
// 获取酒类列表
const getList = async () => {
  const { data, code } = await getWineTypeList();
  if (code === 200) {
    winedata.value = data;
    console.log(data);
  }
};
getList();
// 编辑酒类
const editwinetype = (record) => {
  console.log(record);
  winetypeDialog.value.openModal(record);
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
.space-unit {
  background: white;
}
</style>